<template>
  <div class="sitting">
    <el-tabs v-model="activeName" class="tabs">
      <el-tab-pane label="出勤设置" name="first">
        <chuqingSitting v-if="activeName === 'first'" ref="first" @closeDialog="closeDialog" />
      </el-tab-pane>
      <el-tab-pane label="请假设置" name="second">
        <qingjiaSitting v-if="activeName === 'second'" ref="second" @closeDialog="closeDialog" />
      </el-tab-pane>
      <el-tab-pane label="扣款设置" name="third">
        <koukuanSitting v-if="activeName === 'third'" ref="third" @closeDialog="closeDialog" />
      </el-tab-pane>
      <el-tab-pane label="加班设置" name="fourth">
        <jiabanSitting v-if="activeName === 'fourth'" ref="fourth" @closeDialog="closeDialog" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import chuqingSitting from './chuqingSitting.vue'
import koukuanSitting from './koukuanSitting.vue'
import jiabanSitting from './jiabanSitting.vue'
import qingjiaSitting from './qingjiaSitting.vue'
export default {
  components: {
    chuqingSitting,
    koukuanSitting,
    jiabanSitting,
    qingjiaSitting
  },
  data() {
    return {
      activeName: 'first',
      formLabelWidth: '120px'
    }
  },
  methods: {
    handleClick(tab) {
      this.$refs[tab.name].load(1)
    },
    closeDialog() {
      this.$emit('closeDialog')
    }
  }
}
</script>

<style>
    .sitting{
        width: 100%;
        padding: 0 50px;
    }
    .tabs{
        width: 770px;
    }
</style>
